<template>
    <div class="warehousingRecordDetails">
        <van-overlay :show="overlayShow">
            <van-loading color="#1989fa">加载中...</van-loading>
        </van-overlay>
        <div class="warehousingRecordDetails_header" :show="!overlayShow">
            <div class="conent_pre_content_div">
                <div class="div_all">
                    <div class="label">盘点开始时间：</div>
                    <div class="value">{{ details.createTime }}</div>
                </div>
            </div>
            <div class="conent_pre_content_div">
                <div class="div_all">
                    <div class="label">盘点结束时间：</div>
                    <div class="value">{{ details.finishTime }}</div>
                </div>
            </div>
            <div class="conent_pre_content_div conent_pre_content_divs">
                <div class="div_half">
                    <div class="label">盘点人：</div>
                    <div class="value">{{ details.createByName }}</div>
                </div>
                <div class="div_halfs">
                    <div class="label">盘点部门：</div>
                    <div class="value">{{ details.createDeptName }}</div>
                </div>
            </div>
            <div class="statistics">
                <div class="statistics_div">
                    <div class="num" :style="{ color: '#0094FF' }">{{ details.totalNum }}</div>
                    <div class="title">盘点品类</div>
                </div>
                <div class="statistics_div">
                    <div class="num" :style="{ color: '#19D11B' }">{{ details.addNum }}</div>
                    <div class="title">盘盈品类</div>
                </div>
                <div class="statistics_div">
                    <div class="num" :style="{ color: '#FC2540' }">{{ details.subNum }}</div>
                    <div class="title">盘亏品类</div>
                </div>
            </div>
        </div>
        <van-divider :show="!overlayShow">
            商品详单
        </van-divider>
        <div class="warehousingRecordDetails_content" :show="!overlayShow">
            <div class="conent_pre" v-for="(item, index) in list" :key="index" @click="detailsClick(item.productId)"
                :style="{ 'marginTop': index == 0 ? '0' : '2.666667vw' }">
                <div class="conent_pre_header">
                    <div class="conent_pre_img">
                        <van-image :src="item.productInfo.productImage + '?x-oss-process=image/resize,w_300'"
                            v-if="item.productInfo.productImage"
                            @click.stop="enlargeImage(item.productInfo.productImage)"></van-image>
                        <van-image :src="errImg" v-else></van-image>
                        <div class="liveStreamingMechanisms" v-if="item.productInfo.mechanismList[1]?.cooperationMode">
                            多机制</div>
                    </div>
                    <div class="conent_pre_des">
                        <div class="contnt_title">
                            <div class="contnt_styleName">
                                {{ item.productInfo.styleName }}
                            </div>
                        </div>
                        <div class="contnt_mechanism">
                            {{ item.productInfo.sellingPoints }}
                        </div>
                        <div class="contnt_bottom">
                            <div class="price">￥ {{ item.productInfo.mechanismList[0]?.price ||
                                item.productInfo.mechanismList[0]?.costPrice }}</div>
                            <div class="commission" v-if="item.productInfo.mechanismList[0]?.commission">佣 {{
                                (item.productInfo.mechanismList[0]?.commission || 0) + "%" }}
                            </div>
                            <div class="coreName">{{ item.productInfo.coreName }}</div>
                        </div>
                    </div>
                </div>
                <div class="product_detail_title--content">
                    <div class="product_detail_title-content-info">
                        <div class="product_detail_title-content-info-name">机制：</div>
                        <div class="product_detail_title-content-info-content">
                            {{ item.productInfo.mechanismList[0]?.liveStreamingMechanism }}
                        </div>
                    </div>
                    <div class="product_detail_title-content-info">
                        <div class="product_detail_title-content-info-name">规格/材质：</div>
                        <div class="product_detail_title-content-info-content">
                            {{ item.productInfo.specs }}
                        </div>
                    </div>
                    <div class="product_detail_title-content-info">
                        <div class="product_detail_title-content-info-name">库位码：</div>
                        <div class="product_detail_title-content-info-content warehouse_color">
                            {{ item.locationName }}
                        </div>
                    </div>
                    <div class="product_detail_title-content-info">
                        <div class="product_detail_title-content-info-name">货架类型：</div>
                        <div class="product_detail_title-content-info-content">
                            {{ item.productInfo.stockInfo.shelvesTypeName }}
                        </div>
                    </div>
                    <div class="product_detail_title-content-info">
                        <div class="product_detail_title-content-info-name">库存编码：</div>
                        <div class="product_detail_title-content-info-content">
                            {{ item.productInfo.stockCode }}
                        </div>
                    </div>
                    <div class="statistics">
                        <div class="statistics_div">
                            <div class="num" :style="{ color: '#0094FF' }">{{ Number(item.stockAvailableResult) }}</div>
                            <div class="title">盘点数量</div>
                        </div>
                        <div class="statistics_div">
                            <div class="num" :style="{ color: '#19D11B' }">{{ item.countResult == 2 ?
                                item.countNum : 0 }}</div>
                            <div class="title">盘盈数量</div>
                        </div>
                        <div class="statistics_div">
                            <div class="num" :style="{ color: '#FC2540' }">{{ item.countResult == 3 ? item.countNum
                                : 0 }}</div>
                            <div class="title">盘亏数量</div>
                        </div>
                    </div>
                    <div class="product_detail_title-content-info">
                        <div class="product_detail_title-content-info-name">备注：</div>
                        <div class="product_detail_title-content-info-content">
                            {{ item.remark }}
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { queryCountDetailList } from '@/api/productHome/index'
import { getEnvValue } from "@/utils/index";
import { showImagePreview } from 'vant';
import { getDicts } from '@/api/productList/index'
const route = useRoute()
const router = useRouter()
const errImg = new URL("@/assets/home/error.png", import.meta.url).href;
// 设置loading
const overlayShow = ref(true)

/** 入库单 */
const details = computed(() => {
    return JSON.parse(route.query.details as any)
})

// 列表
const list = ref<any[]>([]);

/** 查询商品列表 */
const getList = async () => {
    const hm_stock_shelves_type = await getDicts('hm_stock_shelves_type')
    const res = await queryCountDetailList({ countId: details.value.id });
    for (let index = 0; index < res.rows.length; index++) {
        const shelvesTypeName = hm_stock_shelves_type.data.filter(item => item.dictValue == res.rows[index].shelvesType)
        res.rows[index].productInfo.stockInfo.shelvesTypeName = shelvesTypeName[0]?.dictLabel
        if (res.rows[index].productInfo.productImage) {
            const real_src = res.rows[index].productInfo.productImage.split(",");
            res.rows[index].productInfo.productImage = getEnvValue("VITE_APP_PIC_URL") + real_src[0]
        }
    }
    list.value = res.rows
    overlayShow.value = false
};
getList()

/** 图片放大 */
const enlargeImage = (img: string) => {
    if (img) {
        showImagePreview({
            images: [img],
        });
    }
};
/** 跳转详情 */
const detailsClick = (id: string) => {
    router.push(`/productHomeDetail/${id}`)
}
</script>
<style lang="less" scoped>
:deep(.van-overlay) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.warehousingRecordDetails {
    width: 100%;
    height: calc(100vh - 90px);
    background-color: #F6FAFF;
    box-sizing: border-box;
    padding-top: 10px;

    .warehousingRecordDetails_header {
        width: 100%;
        background: #FFFFFF;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        padding: 15px;

        .conent_pre_content_divs {
            margin-bottom: 0 !important;
        }

        .conent_pre_content_div {
            width: 100%;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .img_div {
                display: flex;
                align-items: center;
            }

            .img {
                width: 14px;
                height: 14px;
                margin-top: 10px;
            }

            .colors {
                font-weight: 400;
                font-size: 12px;
                color: #FC2540;
                margin-top: 10px;
                margin-left: 10px;
            }

            .label {
                font-weight: 400;
                font-size: 14px;
                color: #1A1B1C;
            }

            .value {
                font-weight: 400;
                font-size: 14px;
                color: #B8BECA;
            }

            .div_all {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .div_half {
                width: 50%;
                display: flex;
                align-items: center;
            }

            .div_halfs {
                width: 50%;
                display: flex;
                align-items: center;
                justify-content: flex-end;
            }
        }

        .statistics {
            width: 100%;
            display: flex;
            box-sizing: border-box;
            padding: 20px 0 10px 0;
            align-items: center;
            justify-content: space-between;

            .statistics_div {
                display: flex;
                flex-wrap: wrap;

                .num {
                    width: 100%;
                    font-weight: 500;
                    font-size: 21px;
                    text-align: center;
                }

                .title {
                    width: 100%;
                    font-weight: 500;
                    font-size: 14px;
                    text-align: center;
                }
            }
        }
    }

    .van-divider {
        color: #1A1B1C;
        border-color: #ECECEC;
        padding: 0 15px;
        margin: 16px 0 !important;
        font-weight: 600;
        font-size: 18px;
        color: #1A1B1C;
    }

    .warehousingRecordDetails_content {
        width: 100%;
        overflow: auto;
        height: calc(100vh - 358px);

        .statistics {
            width: 100%;
            display: flex;
            box-sizing: border-box;
            padding: 20px 0 10px 0;
            align-items: center;
            justify-content: space-between;

            .statistics_div {
                display: flex;
                flex-wrap: wrap;

                .num {
                    width: 100%;
                    font-weight: 500;
                    font-size: 21px;
                    text-align: center;
                }

                .title {
                    width: 100%;
                    font-weight: 500;
                    font-size: 14px;
                    text-align: center;
                }
            }
        }
    }

    .conent_pre {
        width: 100%;
        box-sizing: border-box;
        background-color: #fff;
        box-sizing: border-box;
        padding: 15px;

        .conent_pre_header {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .conent_pre_img {
                width: 90px;
                height: 90px;
                position: relative;

                .liveStreamingMechanisms {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 50px;
                    height: 20px;
                    background: #0094FF;
                    border-radius: 2px 0px 2px 0px;
                    font-weight: 400;
                    font-size: 12px;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: 20px;
                }

                .van-image {
                    width: 90px;
                    height: 90px;

                    :deep(.van-image__img) {
                        border-radius: 5px !important;
                    }
                }
            }

            .conent_pre_des {
                width: calc(100% - 90px);
                height: 90px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                padding-left: 10px;
                align-content: space-around;

                .contnt_title {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .contnt_styleName {
                        font-weight: 400;
                        font-size: 14px;
                        color: #1A1B1C;
                        width: 150px;
                        height: 20px;
                        white-space: nowrap;
                        /* 确保文本在一行内显示 */
                        overflow: hidden;
                        /* 隐藏溢出的内容 */
                        text-overflow: ellipsis;
                    }

                    .contnt_status {
                        width: 67px;
                        height: 26px;
                        background: #E7FDEE;
                        border-radius: 2px;
                        font-weight: 400;
                        font-size: 14px;
                        color: #19D11B;
                        text-align: center;
                        line-height: 26px;
                    }

                }

                .contnt_mechanism {
                    width: 100%;
                    font-weight: 400;
                    font-size: 12px;
                    color: #B8BECA;
                    white-space: nowrap;
                    /* 确保文本在一行内显示 */
                    overflow: hidden;
                    /* 隐藏溢出的内容 */
                    text-overflow: ellipsis;
                }

                .contnt_bottom {
                    width: 100%;
                    height: 20px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .price {
                        font-weight: 500;
                        font-size: 14px;
                        color: #FC2540;
                    }

                    .commission {
                        font-weight: 500;
                        font-size: 14px;
                        color: #FC2540;
                    }

                    .coreName {
                        font-weight: 400;
                        font-size: 12px;
                        color: #0094FF;
                    }
                }
            }
        }

        .product_detail_title-content-info {
            margin-top: 20px;
            display: flex;

            .product_detail_title-content-info-name {
                font-weight: 400;
                font-size: 14px;
                color: #1a1b1c;
                line-height: 14px;
                width: 90px;
            }

            .warehouse_color {
                color: #19D11B !important;
            }

            .colors {
                color: #0094FF !important;
            }

            .product_detail_title-content-info-content {
                font-weight: 400;
                font-size: 14px;
                color: #b8beca;
                line-height: 14px;
                margin-left: auto;
                width: calc(100% - 75px);
                display: flex;
                align-items: center;
                justify-content: flex-end;
                word-break: break-all;

                .colors_div {
                    display: flex;
                    align-items: center;

                    .img {
                        width: 14px;
                        height: 14px;
                    }

                    .colors {
                        font-weight: 400;
                        font-size: 12px;
                        color: #FC2540 !important;
                        margin-left: 10px;
                        margin-right: 10px;
                    }
                }
            }
        }
    }
}
</style>